<template>
	<view class="containers">
		 <scroll-view
		        
		                 :scroll-top="scrollTop"
		                 scroll-y="true"
		                 class="scroll-Y"
		        				  style="height:90vh;" 
		        >
		<view class="shuzi u-m-t-50">
		
		
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200"  label="项目名称" prop="projectId">
					<u-input type="select" :select-open="showProject" v-model="projectName" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="showProject = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200"  label="项目地点" prop="address">
					<u-input :border="border" placeholder="请输入" v-model="model.address" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200"  label="进展阶段" prop="stage">
					<u-input :border="border" placeholder="请输入" v-model="model.stage" type="text" input-align="right"></u-input>
				</u-form-item>
		
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200"  label="争议诉求" prop="dispute">
					<u-input type="select" :select-open="selectShowPpsx" v-model="model.dispute" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowPpsx = true"></u-input>
				</u-form-item>
		
				<!-- 
				<u-gap :bg-color="bgColor" :height="height" :margin-bottom="marginBottom"></u-gap> -->
				<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
					<image src="../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
					<text class="hz">争议说明</text>
				</view>
				<u-form-item class="  zwpj u-m-l-30 u-m-r-30 "  prop="disputeRemark">
					<u-input type="textarea" :border="border" placeholder="请详细描述争议说明" v-model="model.disputeRemark" />
				</u-form-item>
				<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
					<image src="../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
					<text class="hz">其他说明</text>
				</view>
				<u-form-item class="  zwpj u-m-l-30 u-m-r-30 "  prop="otherRemark">
					<u-input type="textarea" :border="border" placeholder="请描述其他说明" v-model="model.otherRemark" />
				</u-form-item>
				<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
					<image src="../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
					<text class="hz">上传图片</text>
		
				</view>
				<view class="u-p-30">
					<u-upload ref="uUpload"  @on-uploaded="onUploaded" :action="action" :auto-upload="autoUpload" :file-list="fileList" :show-progress="showProgress" :max-count="maxCount" :site="baseUrl">
					</u-upload>
				</view>
		
				<u-gap :bg-color="bgColor" :height="height" :margin-bottom="marginBottom"></u-gap>
		
				<view class="" v-show="showProjectDetail">
					<view class="u-m-r-30 u-m-l-30 u-flex u-row-start">
						<image src="../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
						<view class="u-font-30 u-m-l-10">合同签订</view>
		
					</view>
					<view v-for="(item,index) in 1" :key="index" class="tdxy u-m-l-30 u-m-t-30">
						<view class="word u-m-l-30 u-p-t-30">
							<image src="../../static/img/word.png" mode=""></image>
							<text>合同协议.doc</text>
						</view>
						<view class="sctime u-m-l-30 u-p-t-30">
							<text class="scsj">上传时间:</text>
							<text class="sctime u-m-r-20">2020-06-01 16:24:18</text>
						</view>
					</view>
					<u-gap :bg-color="bgColor" :height="height" :margin-bottom="marginBottom" class="u-m-t-30"></u-gap>
					<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
						<image src="../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
						<text class="hz">项目进度</text>
					</view>
					<view class="u-m-t-35 u-m-l-30">
						<view class="ty">
						</view>
					</view>
					<view class="u-m-l-30">
						<view class="xx">
						</view>
						<view class="youbian">
						<view class="u-flex u-row-between">
							<view class="xmjz u-m-l-30">召开会议</view>
							<view class="sctime u-m-r-30">2020-06-10</view>
						</view>
						<view class="sctime u-m-l-30 u-m-t-30">
							正式开启项目会议，了解项目工作内容
						</view>
						</view>
						
					</view>
						
					<view class="u-m-t-35 u-m-l-30">
						<view class="ty">
						</view>
					</view>
					<view class="u-m-l-30">
						<view class="xx">
						</view>
						<view class="youbian">
						<view class="u-flex u-row-between">
							<view class="xmjz u-m-l-30">项目初期</view>
							<view class="sctime u-m-r-30">2020-06-10</view>
						</view>
						<view class="sctime u-m-l-30 u-m-t-30">
							正式开启项目会议，了解项目工作内容
						</view>
						</view>
						
					</view>
					<view class="u-m-t-35 u-m-l-30">
						<view class="ty">
						</view>
					</view>
					<view class="u-m-l-30">
						<view class="xx">
						</view>
						<view class="youbian">
						<view class="u-flex u-row-between">
							<view class="xmjz u-m-l-30">项目中期</view>
							<view class="sctime u-m-r-30">2020-06-10</view>
						</view>
						<view class="sctime u-m-l-30 u-m-t-30">
							正式开启项目会议，了解项目工作内容
						</view>
						</view>
						
					</view>
					<view class="u-m-t-35 u-m-l-30">
						<view class="ty">
						</view>
					</view>
					<view class="u-m-l-30">
						<view class="xx">
						</view>
						<view class="youbian">
						<view class="u-flex u-row-between">
							<view class="xmjz u-m-l-30">项目收尾</view>
							<view class="sctime u-m-r-30">2020-06-10</view>
						</view>
						<view class="sctime u-m-l-30 u-m-t-30">
							正式开启项目会议，了解项目工作内容
						</view>
						</view>
					</view>
				</view>
			</u-form>
		</view>
		<view class="warp u-p-30">
			<u-button class="button" @click="onClick">提交仲裁</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="datas" value-name="id" label-name="name" v-model="showProject" @confirm="myProjectConfirm"></u-select>
			<u-select mode="single-column" :list="types" v-model="selectShowPpsx" @confirm="selectConfirmWxy"></u-select>
			<!--弹出框-->
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		name: "m-arbitration",
		props: {
			datas: Array, //数据
		},
		data() {
			let that = this;
			return {		
				showProjectDetail:false,
				fileList: [],			
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: false,
				deletable: true,
				customStyle: false,
				maxCount: 9,
				lists: [], // 组件内部的文件列表
				filePaths:'', // 文件路径
				fileNames:'', // 文件名称
				action:this.$apis.uploadFile,
				baseUrl:this.$mConfig.baseUrl,
				errorType: ['toast'],
				scrollTop: 0,
				  old: {
					scrollTop: 0
				  },
				showProject:false,
				myProject:[],
				selectShowPpsx:false,				
				types: [{
						value: '继续履行',
						label: '继续履行'
					},
					{
						value: '违约金',
						label: '违约金'
					}
				],
				rules:[],
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				/**
				 * form验证
				 * */
				model: {},
				required: false,
				border: false,
				check: false,
				projectName:'',
				list:[],
				project:[]
			};
		},
		mounted() {},
		onShow() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created:function(){
			var that = this;
			let list = that.datas;
			console.log(list);
			if(list.length > 0){
				this.list = list;
			}
		},
		methods: {
			onUploaded(lists) {
				 var filePaths = [],fileNames = [];
				 for(let i in lists){
				 	console.log('data',lists[i].response);
				 	if(lists[i].response.code == 200){
				 		filePaths.push(lists[i].response.message);
				 	}
				 }		
				 //this.filePaths = filePaths.join(',');
				 this.model.images = filePaths;
			},
			selectConfirmWxy(e) {
				this.model.dispute = '';
				e.map((val, index) => {
					this.model.dispute += this.model.dispute == '' ? val.label : '-' + val.label;
				});
			},
			myProjectConfirm(e){
				console.log(e);
				e.map((val, index) => {
					this.model.projectId =  val.value;					
					this.projectName = val.label;
				});				
				console.log(this.list);
				for(var i in this.list){
					if(this.model.projectId ==this.list[i].id){
						this.model.address = this.list[i].area;
						this.model.stage = this.list[i].stage;
					}
				}
				this.showProjectDetail = true;
			},			
			onClick() {
				 this.$emit('click', {
				 	model: this.model
				 })
			}
		}
		
	}
</script>

<style scoped lang="scss">
// page {
	// 	background: #f5f5f9;
	// }
	.youbian{
		// border: 1px solid;
		margin-top: -230rpx;
	}
	.xmjz {

		font-weight: bold;
		font-size: 32rpx;
	
		color: #B9BCC1;
	}

	.sctime {

		color: #888D99;
		font-size: 28rpx;
		// margin-left: 20rpx;
	}

	.ty {
		width: 18rpx;
		height: 18rpx;
		background: #ffffff;
		border-radius: 50%;
		border: 2rpx solid #c8b8c5;
		;
	}

	.xx {
		width: 2rpx;
		height: 200rpx;
		border: 2rpx dashed #888D99;
		opacity: 0.5;
		margin-left: 7rpx;
		margin-top: 8rpx;
	}

	.tdxy {
		width: 690rpx;
		height: 159rpx;
		background: #F5F5F9;
		border-radius: 20rpx;

		.word {
			display: flex;
			align-items: center;

			image {
				width: 41rpx;
				height: 37rpx;
			}

			text {
				color: #4B9CFF;
				font-size: 30rpx;
				margin-left: 16rpx;
			}
		}
	}


	.scxy {
		display: flex;
		align-items: center;
		width: 190rpx;
		height: 52rpx;
		border: 2rpx solid #AB61FF;
		border-radius: 26rpx;
		color: #AB61FF;
		font-size: 26rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
			margin-left: 26rpx;
		}
	}

	.top {
		width: 100%;
		height: 350rpx;
		background: linear-gradient(0deg, #AB61FF, #DF61FF);

		.above {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 46rpx;
				margin-top: 20rpx;
			}
		}

		.below {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 46rpx;
				margin-top: 1rpx;
			}
		}
	}

	.count {
		margin-top: -50rpx;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.fgx1 {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 30rpx auto 45rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.word {
		font-size: 36rpx;
		color: #0d1d36;
		font-weight: bold;
	}

	.qtsm {
		display: flex;
		align-items: center;

		.hz {
			color: #0D1D36;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>

